<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-04-12 09:28:55
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-06-27 10:52:46
 * @FilePath: \vue3-progect\src\components\FormType\component\CustomIcon\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-04-12 09:28:55
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-06-27 10:51:16
 * @FilePath: \vue3-progect\src\components\FormType\component\CustomIcon\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 图标输入框 -->
<template>
	<el-input v-model="value" :placeholder="config.placeholder">
		<template #append>
			<el-button @click="iconClick">
				<svg class="svg_icon_wrap" aria-hidden="true">
					<use :xlink:href="value"></use>
				</svg>
			</el-button>
		</template>
	</el-input>
	<BaseIconDialog v-model="dialogVisible" v-model:code="value" />
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
const props = defineProps({
	config: { type: Object, required: true },
	form: { type: Object, required: true }
});
// const emits = defineEmits(["update:form"]);
const value = computed({
	get: () => props.form[props.config.prop] || props.config.default || "",
	set: (val) => {
		props.form[props.config.prop] = val;
	}
});

const dialogVisible = ref(false);
const iconClick = () => {
	dialogVisible.value = true;
};
</script>

<style lang="less" scoped>
:deep(.el-button) {
	padding: 0;
}
:deep(.el-form-item__error) {
	right: 33px + 40px !important;
}
.svg_icon_wrap {
	font-size: 20px;
	width: 1em;
	height: 30px;
	transition: font-size 0.25s linear, width 0.25s linear;
	cursor: pointer;
	&:hover {
		font-size: 25px;
	}
}
</style>
